<template>
  <div class="monitor_page">

    <!-- table -->
    <el-card class="monitor_page-left" :class="{toggle: isToggleStatus}" shadow="hover">
      <div class="filter_header">
      <el-form ref="form" label-width="100px">
        <div class="monitor_page-filter"  v-show="!isToggleStatus">
          <el-form-item label="起止时间：">
            <el-date-picker
              style="width:100%;min-width:240px"
              size="small"
              value-format="timestamp"
              v-model="timerArray"
              type="datetimerange"
              :picker-options="pickerOptions"
              :clearable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </div>
      </el-form>
      <div class="monitor_page-filter flex-between" :class="{setMarginTop: isToggleStatus}">
        <div class="monitor_page-filter-left">
          <button class="toggle_wrap" @click="toggleStatus">
            <i class="el-icon-s-fold" :class="{rotate: isToggleStatus}"></i>
          </button>
          <div v-show="!isToggleStatus">
            <el-button
              size="small"
              @click="confirmDelete"
              icon="el-icon-delete-solid"
              v-if="hasPermission('monitor:record:del')"
              type="danger">删除
            </el-button>
            <el-button
              size="small"
              plain
              v-if="hasPermission('monitor:record:mark')"
              type="primary"
              @click="showMonitorRemarkDialog">说明
            </el-button>
            <el-button
              size="small"
              plain
              v-if="jiuGanKeJi"
              type="primary"
              @click="lookEquipRecord(timerArray,equipId)">运行日志
            </el-button>
            <el-button
              size="small"
              plain
              v-if="hasPermission('monitor:record:export')"
              @click="$emit('export')"
              icon="el-icon-download"
              type="primary">数据导出
            </el-button>
          </div>
        </div>
        <el-button
          v-show="!isToggleStatus"
          size="small"
          type="primary"
          class="common_btn-defalut"
          icon="el-icon-search"
          @click="form.page=1;$emit('update')">搜索
        </el-button>
      </div>
      </div>
      <!-- table -->
      <el-table
        v-show="!isToggleStatus"
        :data="tableList"
        border
        :height="515"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        tooltip-effect="dark">
        <el-table-column  align="center" type="selection" width="40">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="数据采集时间" min-width="115">
          <template slot-scope="scope">
            {{scope.row.createTime | formatTimer }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="hourlyRainfall" label="降雨强度(mm/h)" min-width="115">
        </el-table-column>

      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-show="!isToggleStatus"
        :disabled="isToggleStatus"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
        :total="form.total">
      </el-pagination>
    </el-card>

    <!-- 绘图部分 -->
    <div class="monitor_page-right">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="降雨强度" name="hourlyRainfall">
          <el-card class="card_echarts" shadow="hover">
            <echarts-four
              ref="hourlyRainfall"
              type="hourlyRainfall"
            ></echarts-four>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="每小时降雨量" name="hourlyRain">
          <el-card class="card_echarts" shadow="hover">
            <echarts-four-two
              ref="hourlyRain"
              type="hourlyRain"
            ></echarts-four-two>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="每24小时降雨量" name="dailyRain">
          <el-card class="card_echarts" shadow="hover">
            <echarts-four-two
              ref="dailyRain"
              type="dailyRain"
            ></echarts-four-two>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="isShowDialog"
      :before-close="handleClose"
      :close-on-click-modal="false">
      <echarts-one-dialog ref="echartsDialog"></echarts-one-dialog>
    </el-dialog>
    <monitor-remark ref="monitorRemark" @update="$emit('update')"></monitor-remark>
  </div>

</template>

<script>
import EchartsFour from "../monitor-echarts/base/echarts-4";
import EchartsFourTwo from "../monitor-echarts/base/echarts-4-two";

import ItemMixins from "./item.mixins";
import Format from '@/utils/format'

export default {
  mixins: [ItemMixins],
  components: {EchartsFour,EchartsFourTwo},
  props: ["typeOneUmumList", "calcType", "calcVal"],
  data() {
    return {
      tabPanes: [],
      isTestAll: ' ',
      isTest1: true,
      isTest2: true,
      tabsName: [],
      isEcharts: 0,
      activeName: "hourlyRainfall",
      monitoringsTime: [],
      // 当前的图表钩子
      chartsName: ['dailyRain',  'hourlyRain', 'hourlyRainfall'],
      // 分页参数
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      // 弹窗title
      dialogTitle: "",
      // 是否显示弹窗
      isShowDialog: false,
    };
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer))
    },
  },
  computed: {
    // 筛选类型改变
    detailList() {
      return (
        this.typeOneUmumList.find((x) => x.code === this.calcTypeModel)
          ?.relationTypeList || []
      );
    },
    calcTypeModel: {
      get() {
        return this.calcType;
      },
      set(value) {
        this.$emit("update:calcType", value);
      },
    },
    calcValModel: {
      get() {
        return this.calcVal;
      },
      set(value) {
        this.$emit("update:calcVal", value);
      },
    },
  },
  methods: {
    setWarningLine() {
    },
    //

    //tab 切换进行echart随着窗口改变方法，让数据重新渲染，
    handleClick(tab, event) {

      this.chartsName.map((name) => {
        if (this.$refs[name]) {
          this.$nextTick(() => {
            this.$refs[name].echartResize();

          });
        }

      });
    },
    // 筛选类型改变
    typeChange(value) {
      this.$nextTick(() => {
        this.calcValModel = this.detailList[0]?.code;
      });
    },
    // 数据刷新
    update({data, monitorInfo}) {
      this.equipId = monitorInfo.bindEquipId
      this.collectionList = data.recordList || []
      this.form.page = 1;
      this.form.total = this.collectionList.length;
      this.selectionList = JSON.parse(JSON.stringify(this.tableList));
//  ['dailyRain','hourlyRain','hourlyRainfall']
      if (this.$refs.hourlyRainfall.updateEchart) {
        this.$nextTick(() => {
          this.$refs.hourlyRainfall.updateEchart(data.hourlyRainfall, '降雨强度')
        })
      }
      if (this.$refs.hourlyRain.updateEchart) {
        this.$nextTick(() => {
          this.$refs.hourlyRain.updateEchart(data.hourlyRain, '每小时')
        })
      }
      if (this.$refs.dailyRain.updateEchart) {
        this.$nextTick(() => {
          this.$refs.dailyRain.updateEchart(data.dailyRain, '每24小时')
        })
      }
      this.chartsName.map((name) => {
        if (this.$refs[name]) {
          this.$nextTick(() => {
            this.$refs[name].echartResize();

          });
        }
      });
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val;
      this.$nextTick(() => {
        this.$refs.multipleTable.toggleAllSelection();
      });
    },
    // 勾选改变
    handleSelectionChange(val) {
      this.selectionList = val;
      this.partUpdateChart();
    },
    partUpdateChart() {

    },
    handleClose() {
      this.isShowDialog = false;
    },
  },
  mounted() {
    this.chartsName.map((name) => {

    });

  }
};
</script>

<style scoped="scoped" lang="less">
  @import url("./commom.less");

  // 还需自定义的css
  .card_echarts {
    height: 680px;
  }

  .monitor_page-left {
    // 15px未margin
    /*height: 1530px;*/
    height: 750px;
  }

  .filter_select {
    .el-select {
      width: 40%;
    }
  }


  .tabTitle {
    background: red;
  }
</style>
